<template>
  <div>
    <a-modal
      :visible="isShow"
      width="50%"
      style="min-width: 900px"
      ok-text="确认" cancel-text="取消" @cancel="cancelModal"
      :footer="null"
      class="ofc"
    >
    <a-spin :spinning="loading">
      <div style="min-width: 900px">
        <h2 style="text-align: center;padding-top: 30px;">{{ topTitle == '详情' ? '立项申请单' : topTitle }}</h2>
        <div id="printContent" class="printContainer">
          <div
            style="width: 98%; padding-top: 30px;padding-left: 15px; height: 100%; padding-bottom: 20px"
          >
            <div style="padding-bottom: 10px" class="no-bord">
              编号：
              <!-- <span style="cursor: pointer;" @click="openDetail"></span> -->
                {{ obj.data.id }}
              
            </div>
            <a-row v-for="(i,index) in label" :key="index">
              <a-col :span="c.field !='uploadFile' && c.border != 'left' ? 12 : 24" class="col" v-for="(c,ix) in i" :key="ix" :class="{'nor': ix %2 !==0, 'yor': c.border == 'left' }">
                <div class="title">{{c.label}}</div>
                <div class="val" v-if="c.component.indexOf('JDict') >-1">
                  <JDictTag :isTag="false" :vals="setVal(c.field)" placeholder="--" :dictCode="c.componentProps.dictCode"/>
                </div>
                <div class="val" v-else>
                  <span v-if="c.field !='uploadFile' && c.field !='remark'">{{ setVal(c.field) }}</span>
                  <a-tooltip placement="top" :title="setVal(c.field)" v-if="c.field !='uploadFile' && c.field =='remark'">
                    <div class="media-box__desc">{{ setVal(c.field) }}</div>
                  </a-tooltip>
                  <span v-if="c.field =='uploadFile'" style="display:flex; height: 54px;line-height: 1;width: 100%">
                    <span v-for="file in items.annexList" style="flex:1; margin-top:8px">
                      <a :href="file.url" target="_blank">
                        <img src="../../../../assets//images/wallet.png" width="25" height="25" alt=""><br/>
                        <p :title="file.annexName" style="padding:0;margin:0;width:70px;" class="media-box__one">{{ file.annexName }}</p>
                      </a>
                    </span>
                  </span>
                </div>
              </a-col>
            </a-row>
          </div>
          <div style="text-align: left;margin: 0 15px;padding-bottom: 30px">
            <a-row style="padding-bottom: 10px">审核记录</a-row>
            <!-- 如果已经审核通过了，或者拒绝了不显示 -->
            <!-- 显示三次的审核意见，结果，时间，审核人 -->
            <!-- <a-card :bordered="false"> -->
            <a-table bordered :dataSource="dataSource" :columns="columns" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'applyStatus'">
                  <a-tag v-if="record.applyStatus == 1" color="green">通过</a-tag>
                  <a-tag v-if="record.applyStatus == 2" color="orange">拒绝</a-tag>
                  <a-tag v-if="record.applyStatus == 3" color="#108ee9">待审</a-tag>
                  <a-tag v-if="record.applyStatus == 4" color="green">终审通过</a-tag>
                  <a-tag v-if="record.applyStatus == 5" color="red">终审拒绝</a-tag>
                </template>
              </template>
            </a-table>
            <template v-if="topTitle =='审核'">
              <!-- 审核状态 1 通过 2 拒绝 3 待审 -->
              <a-row style="padding-bottom: 10px;margin-top:12px" v-if="items.applyStatus == 3">审核</a-row>
              <a-radio-group v-model:value="updata.applyStatus" name="radioGroup" v-if="items.applyStatus == 3">
                <a-radio value="1">通过</a-radio>
                <a-radio value="2">拒绝</a-radio>
              </a-radio-group>
              <a-textarea v-model:value="updata.applyContent" placeholder="请输入说您的审核意见" allow-clear style="margin-top:12px" />
              <a-button type="primary" style="margin-top:20px" @click="proApplyFn">提交审核</a-button>
            </template>
          </div>
        </div>
        <div style="text-align: center;padding: 20px 0" v-if="topTitle =='详情'"><a-button @click="print">打印文件</a-button></div>
      </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue"
import dayjs from 'dayjs'
import printJS from 'print-js'
import { JDictTag } from '/@/components/Form'
import { useMessage } from '/@/hooks/web/useMessage';
import { useModal } from '/@/components/Modal';

import { getRocDetail, getHrDetail, getOopDetail, apply, getRcLog, proApply, monsterSetupApplyDetail } from '../MonsterRocProjectSetup.api'
import { rocFormSchema } from '../MonsterRocProjectSetup.data'
import { hrFormSchema } from '../MonsterHrProjectSetup.data'
import { oopFormSchema } from '../MonsterOopProjectSetup.data'

import { USER_INFO_KEY } from '/@/enums/cacheEnum'
import { getAuthCache } from '/@/utils/auth'
const [registerModal, {openModal}] = useModal()

let user = getAuthCache(USER_INFO_KEY) || {}
let props = defineProps({
  isShow: false,
  ids: '',
  items: '',
  title: ''
})
const emit = defineEmits(['handleCallFun'])
const label = ref([])
const obj = reactive({
  data: {}
})
const def = ref({})
const loading = ref(true)
const topTitle = ref(props.title)

const updata = ref({
  projectId: props.items.id,
  applyStatus: "1",
  applyUserId: user.id,
  applyContent: ''
})

const dataSource = ref([
  {
    applyTime: '',
    applyUserId: '',
    dataIndex: '',
    applyContent: '',
}])

const columns = ref([
  {
    title: '时间',
    dataIndex: 'applyTime',
    key: 'applyTime',
  },
  {
    title: '结果',
    dataIndex: 'applyStatus',
    key: 'applyStatus',
  },
  {
    title: '审核意见',
    dataIndex: 'applyContent',
    key: 'applyContent',
  },
  {
    title: '审核人',
    dataIndex: 'applyUserName',
    key: 'applyUserName',
  }
])

const cancelModal = () => {
  emit('handleCallFun')
}

function print() {

  printJS({
    // 要打印的html的节点id
    printable: "printContent",
    header: "立项申请",
    headerStyle: "text-align: center;font-size:16px;font-weight:500",
    // 打印类型 html
    type: "html",
    // 继承样式
    targetStyle: '*',
    targetStyles: '*',
    // scanStyles: false,
    documentTitle: " ",
    // 默认800，设置1000是因为我窗口宽度是1000，而导致页面靠近左边，设置1000就正常居中了。
    maxWidth: "1000"
  })
}

function setVal(field) {
  for(let o in obj.data) {
    if(o == field && field && field !='pm') {
      return obj.data[o] || '-'
    }
    if(field =='pm') {
      return obj.data['createBy'] || '-'
    }
  }
}

function openDetail (record) {
  // topTitle.value = '详情'
  // 处理图片
  let img = []
  let file = record.annexList ? JSON.parse(JSON.stringify(record.annexList)) : []
  file.forEach((item) => {
    img.push({
      uid: item.id,
      fileName: item.annexName,
      filePath: item.url,
      status: 'done',
      response: {
        status: 'history',
        message: item.url
      }
    })
  })
  openModal(true, {
    record: Object.assign(record,{uploadFile:JSON.stringify(img)}),
    isUpdate: true,
    showFooter: false,
  });
}

async function rocDetail () {
  try{
    let d = await monsterSetupApplyDetail({ id: props.items.id})
    def.value = d

    let r
    let arr
    // ROC
    if(props.items.applyProjectType == 1){
      r = await getRocDetail({id: props.items.projectId})
      arr = rocFormSchema//JSON.parse(JSON.stringify(rocFormSchema)).splice(0,rocFormSchema.length - 1)
    }
    // 人力
    if(props.items.applyProjectType == 2){
      r = await getHrDetail({id: props.items.projectId})
      arr = hrFormSchema
    }
    // oop
    if(props.items.applyProjectType == 3) {
      r = await getOopDetail({id: props.items.projectId})
      arr = oopFormSchema
    }
    obj.data = r
    const result = []
    for (let i = 0; i < arr.length; i += 2) {
      result.push(arr.slice(i, i + 2))
    }
    label.value = result

    let l = await getRcLog({ projectId: props.items.projectId})
    dataSource.value = l
    loading.value = false
  }catch(er){
    loading.value = false
  }
}

function proApplyFn () {
  const { createMessage } = useMessage()
  if(!updata.value.applyContent) {
    return createMessage.warn('请输入说您的审核意见');
  }
  proApply(Object.assign(def.value,{projectName:props.items.projectName,applyContent:updata.value.applyContent,applyUserId:user.id,applyTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),applyStatus:updata.value.applyStatus})).then((res) => {
    emit('handleCallFun', true)
  })
}

onMounted(() => {
  console.log(props.items)
  rocDetail()
})
</script>
<style scoped lang="less">
/deep/ .el-dialog__footer {
  height: 70px;
  margin-top: 15px;
}

.col {
  // border: 1px solid #e6e9f0;
  border: 1px solid #666;
  border-top: 0;
  min-height: 55px;
  display: flex;
  align-items: center;

  div {
    padding-left: 20px;
  }
  .title {
    // min-width: 150px;
    min-width: 125px;
    // background-color: #f5f5f5; //title的背景色
    // color: #1F2E4D;
    color: #666;
  }
  .val {
    flex: 1;
    // border-left: 1px solid #e6e9f0;
    border-left: 1px solid #666;
    // color: #3D4966;
    color: #666;
    min-height: 55px;
    display: inline-flex;
    align-items: center;
    word-break:break-all;
    height: 100%;
    width: 100%;
    span, .xx{
      flex-shrink: 0;
      width: 100%;
    }
  }
}
.nor{
  border-left: 0;
}
.yor {
  border-left: 1px solid #666;
}
.no-bord{
  border-bottom: 1px solid #666;
}
</style>

<style>
.printContainer {
  -webkit-print-color-adjust: exact;
}
@page { margin: 0; }
.ofc .xx{
  flex-shrink: 0;
  width: 100%;
}
</style>
